import { Component } from "react";
import { Empty, Button } from "antd";
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
  static getDerivedStateFromError(error) {
    console.log(error);
    return { hasError: true };
  }
  componentDidCatch(error) {
    // 可以做一些错误的打印
    // 类组件 没有捕获错误的hooks所以暂时用类组件
    // 可用emtpy组件增加空白页样式 react.lazy需要用supence 结合componentDidCatch捕获错误 包括网络异常 error
    // 性能优化
    console.log(error);
  }
  render() {
    const { children } = this.props;
    const { hasError } = this.state;
    const UI = (
      <Empty
        image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
        imageStyle={{
          height: 60,
        }}
        description={
          <span>
            出错了，请联系系统管理员！
            <Button
              type="primary"
              onClick={() => this.setState({ hasError: false })}
            >
              重试
            </Button>
          </span>
        }
      ></Empty>
    );
    return hasError ? UI : children(this.props); //出错就不返回children组件
  }
}
export default ErrorBoundary;
